<template>
    <popup v-model="flag" :hide-on-blur="false" class="popup-carNum">
        <popup-header
            :left-text="'取消'"
            :right-text="'确定'"
            :title="popupCarNum"
            :show-bottom-border="false"
            @on-click-left="cancelClick"
            @on-click-right="completeClick"></popup-header>
        <group>
            <!--            <div class="keyboard" v-if="keyboardShow" :class="{animationDown:isDown,animationUp:isUp}">-->
            <div class="keyboard">
                <div v-if="keyboard == 'txt'">
                    <div class="keyboard-row" v-for="(item, rows) in carTxt" :key="rows + 9">
                        <button class="keyboard-row-item" v-for="(i, index) in item.name"
                                @click="btnWordClick(rows, index, i)" :key="index + 99">{{i}}
                        </button>
                    </div>
                    <div class="keyboard-row">
                        <button v-for="(item, i) in carNumBottomtxt"
                                class="keyboard-row-item bottom" :key="i + 999" @click="btnBottomClick(item)">{{item}}
                        </button>
                        <button v-for="(j, i) in noneBottomtxt" class="none-botton" :key="i">{{j}}</button>
                        <div class="keyboard-row-item clear" @click="clearClick">
                            <span class="el-icon-back"></span>
                        </div>
                        <div class="keyboard-row-item rest" @click="restClick">
                            清空
                        </div>
                    </div>
                </div>
                <div v-if="keyboard == 'num'">
                    <div class="keyboard-row" v-for="(item,rows) in carNums" :key="rows + 8">
                        <button
                            :disabled="isSelect && rows==0"
                            :class="isSelect && rows==0 ? isBtnColor : ''"
                            class="keyboard-row-item" v-for="(i,index) in item.name" :key="index + 88"
                            @click="btnWordClick(rows,index,i)">{{i}}
                        </button>
                    </div>
                    <div class="keyboard-row">
                        <button v-for="(item, i) in carNumBottom" class="keyboard-row-item bottom"
                                :key="i + 88" @click="btnBottomClick(item)">{{item}}
                        </button>
                        <button v-for="(j, num) in noneBottom" :key="num + 888" class="none-botton">{{j}}</button>
                        <div class="keyboard-row-item clear" @click="clearClick">
                            <span class="el-icon-back"></span>
                        </div>
                        <div class="keyboard-row-item rest" @click="restClick">
                            清空
                        </div>
                    </div>
                </div>
            </div>
        </group>
    </popup>
</template>

<script>
    import {Group, Popup, PopupHeader} from 'vux'

    export default {
        props: ['carNum'],
        data() {
            return {
                flag: true,
                popupCarNum: '',
                isUp: false,
                isDown: false,
                keyboardShow: false,
                keyboard: 'txt',
                carTxt: [
                    {name: ['粤', '京', '冀', '沪', '津', '晋', '蒙', '辽', '吉', '黑']},
                    {name: ['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '桂']},
                    {name: ['琼', '渝', '川', '贵', '云', '藏', '陕', '甘', '青', '宁']}
                ],
                noneBottomtxt: ['', '', '', '', ''],
                carNumBottomtxt: ['新'],
                carNumBottom: ['警'],
                // carNumBottom: ['W', 'X', 'Y', 'Z', '使', '领', '学', '挂', '港', '澳'],
                noneBottom: ['', '', '', '', ''],
                carNums: [
                    {name: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0']},
                    {name: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K']},
                    {name: ['L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V']},
                    {name: ['W', 'X', 'Y', 'Z', '使', '领', '学', '挂', '港', '澳']}
                ],
                isBtnColor: 'btnColor',
                isSelect: false
            }
        },
        updated() {
            if (this.popupCarNum.length < 1) {
                this.keyboard = 'txt'
                this.isSelect = false
            } else {
                this.keyboard = 'num'
                if (this.popupCarNum.length === 1) {
                    this.isSelect = true
                } else {
                    this.isSelect = false
                }
            }
        },
        mounted() {
            if (this.carNum) {
                this.popupCarNum = this.carNum
            }
        },
        watch: {},
        methods: {
            // 车牌号输入框获取焦点
            focus() {
            },
            // 键盘点击‘完成’
            completeClick() {
                let _this = this, num = this.popupCarNum
                this.$emit('saveCarNum', num)
                _this.popupCarNum = ''
            },
            // 键盘选择显示
            btnWordClick(rows, index, i) {
                this.popupCarNum += i
            },
            btnBottomClick(val) {
                this.popupCarNum += val
            },
            // 键盘点击‘删除图标’
            clearClick() {
                this.popupCarNum = this.popupCarNum.slice(0, -1)
            },
            // 清空
            restClick() {
                this.popupCarNum = ''
            },
            cancelClick() {
                this.$emit('saveCarNum', null)
            }
        },
        components: {
            Group,
            Popup,
            PopupHeader
        }
    }
</script>

<style scoped lang="less">
    .popup-carNum {
        /deep/ .vux-no-group-title {
            margin-top: .2rem;
        }

        /deep/ .weui-cells:before {
            border-top: none !important;
        }

        // 自定义输入键盘
        .keyboard {
            width: 100%;
            padding-bottom: .2rem;
            background: #eeeeee;
            z-index: 10;

            &.animationDown {
                animation: slide_dowms 0.3s ease-out;
                animation-fill-mode: forwards;
            }

            &.animationUp {
                animation: slide_ups 0.3s ease-out;
                animation-fill-mode: forwards;
            }

            .keyboard-row {
                margin-top: .03rem;
                display: flex;
                justify-content: space-between;
                padding: 0 .04rem;
                color: #333;

                &:first-child {
                    margin-top: 0;
                }

                .keyboard-row-items {
                    display: flex;
                    justify-content: left;
                }

                .keyboard-row-bottom {
                    display: flex;
                    justify-content: space-between;
                }

                .keyboard-row-item {
                    width: .75rem;
                    height: .75rem;
                    margin: .05rem;
                    background: #fff;
                    font-size: .32rem;
                    text-align: center;
                    border: 1px solid #d9d9d9;
                    border-radius: .1rem;
                    color: #333;

                    &.bottom {
                        height: .75rem;
                        width: .75rem;
                        line-height: .75rem;
                        background: #fff;
                        color: #333;
                    }

                    &.clear, &.rest {
                        width: 1.6rem;
                        height: .75rem;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }

                    &.rest {
                        font-size: .28rem;
                    }
                }

                .none-botton {
                    border: none;
                    height: .75rem;
                    width: .75rem;
                    margin: .05rem;
                    visibility: hidden;
                }

                .btnColor {
                    background-color: #d9d9d9;
                }
            }

            button {
                &:active {
                    background: #f4f4f4 !important;
                    color: #999 !important;
                }
            }
        }

        // 键盘滑动
        @keyframes slide_ups {
            from {
                bottom: -502px;
            }
            to {
                bottom: 0px;
            }
        }
        @keyframes slide_dowms {
            from {
                bottom: 0px;
            }
            to {
                bottom: -502px;
            }
        }
    }
</style>
